<template>
	<view class="my-tabbar">
		<view class="tabbar-box safe-area-inset-bottom">
			<view class="tabbar-item" v-for="(item,index) in list" :key="index" @click="navigator(item)">
				<image :class="{'mid-img':item.midButton}" :src="current==index ? item.selectedIconPath : item.iconPath" mode=""></image>
				<view v-if="!item.midButton" class="tabbar-text" :class="{active: current==index}">{{item.text}}</view>
			</view>
		</view>
		<!-- 高度 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		name:'Tabbar',
		data() {
			return {
				current:0,
				list:[
					{text:'首页',iconPath: "/static/img/tabbar/index.png",selectedIconPath: "/static/img/tabbar/index_active.png",pagePath: '/pages/index/index'},
					// {midButton: true,text:'举报',iconPath: "/static/img/tabbar/report.png",pagePath: '/pagesA/report/index'},
					{text:'我的',iconPath: "/static/img/tabbar/mine.png",selectedIconPath: "/static/img/tabbar/mine_active.png",pagePath: '/pages/mine/index'}
				]
			}
		},
		created() {
			// 获取引入了u-tabbar页面的路由地址，该地址没有路径前面的"/"
			let pages = getCurrentPages();
			// 页面栈中的最后一个即为项为当前页面，route属性为页面路径
			this.current = this.list.findIndex(row=>row.pagePath === ('/'+pages[pages.length - 1].route));
		},
		methods: {
			navigator(row){
				if(row.midButton){
					uni.navigateTo({
						url: row.pagePath
					})
				}else{
					uni.switchTab({
						url: row.pagePath
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.my-tabbar{
		.tabbar-box{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			box-shadow: 0px -2px 4px 0px rgba(0,0,0,0.01);
			display: flex;
			align-items: center;
			z-index: 999;
			.tabbar-item{
				flex: 1;
				text-align: center;
				image{
					width: 24px;
					height: 24px;
					&.mid-img{
						width: 60px;
						height: 60px;
						position: relative;
						top: -6px;
					}
				}
				.tabbar-text{
					font-size: 10px;
					&.active{
						color: #1F87FF;
					}
				}
			}
		}
		.safe-area-inset-bottom {
			height: 50px;
			box-sizing: initial;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}
</style>